<!-- eslint-disable vue/multi-word-component-names -->
<template >
   
    <div id="building">    
       
        <div class="l-content">
            <h3 id="title">软件售后管理系统</h3>
        </div> 
       
     <div id="title1">
     <el-form   class="login" :model="user" :rules="rules" ref="login"  > <!-- 加:inline="true" 行内表单-->
         <h3 id="title2">系统登录</h3>
 
         <el-form-item label="账号" prop="userName" >
             
              <el-input  class="login1"  v-model="user.userName" placeholder="请输入账号" prefix-icon="el-icon-user" ></el-input>  
              
              <!-- v-model为数据绑定 placeholder为输入框默认显示-->
         </el-form-item>
 
         <el-form-item label="密码" prop="password" >
             <el-input  class="login1" type="password" v-model="user.password" placeholder="请输入密码" prefix-icon="el-icon-lock" ></el-input>
         </el-form-item>
 
         <div style="display: flex;">
         <div style="flex:1;text-align: left;" ><span style="color: #0f9876;size: 5px;cursor: pointer;" @click="$router.push('/Register')">还没有账户?请注册</span></div>
         <div style="flex:1;text-align: right;" ><span style="color: #0f9876;size: 5px;cursor: pointer;" @click="$router.push('/Forget')">忘记密码</span></div>
         </div>
         <el-form-item>
             <el-button  @click="submit" type="primary" id="login-button"
             >登录</el-button>
             <!-- @click="submit" 绑定点击事件 -->
         </el-form-item>
         
         <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            append-to-body
            top="20%"
        ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
        <span>{{ dmessage }}</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
 
     </el-form>
     </div>
    </div>
 </template>
 
 
 <script>
 
 
import {getuser} from '../api/login' //实验一
import bcrypt from 'bcryptjs'
 

 export default {
     data(){
         return{
             dmessage:'',//后端返回的提示信息
             dialogVisible: false,//弹出框显示
             url: '',
             urlList: [],
             timer: null,
             user:{
                 userName:'',
                 password:''
             },//数据定义
             
             rules:{
                 userName:[
                     {required:true,trigger:'blur',message:'请输入账号'}
                 ],
                 password:[
                     {required:true,trigger:'blur',message:'请输入密码'}
                 ]
             } //数据校验定义,rules:{}为对象变量
         }    
     },
     methods:{
         //登录
         submit() {
             
             // var salt = bcrypt.genSaltSync(12);    //定义密码加密的计算强度,默认10
             var hash = bcrypt.hashSync(this.user.password, '$2a$12$c2Sr/uy88pQhDkzKhWF4we');    //把自己的密码(this.user.password)带进去,变量hash就是加密后的密码 ,salt
             console.log(hash)
             this.$refs.login.validate((valid) => {
                 // 校验通过
                 if (valid) {
                     //{userName:this.user.userName,password:this.user.password}
                     getuser({userName:this.user.userName,password:hash}).then(({ data }) => {
                         console.log(data)
                         if (data.code == 200) {
                             // const token=Mock.Random.guid()
                             //获取用户权限
                             sessionStorage.setItem("role", data.data.role);//data.data.role
                             // token信息存入cookie用于不同页面间的通信
                             sessionStorage.setItem("token1", data.data.token);
                             // 跳转到首页
                             this.$router.push('/Home')
                         }  
                         else {
                            this.dmessage = data.msg; 
                            this.dialogVisible = true;//打开弹窗
                         }
                     })
                 }
             })
 
            //  //跳转到首页
            //  sessionStorage.setItem("role", 1);
            //  sessionStorage.setItem("token1", 3);
            //  this.$router.push('/Home')
         },
        
 
    }
     
 }
 </script>
 
 <!-- scoped属性的作用是将当前标签下的样式私有化，仅对当前组件起作用 -->
 <style scoped> 
 
 #building{
   background:url("../assets/Loginbackgrand.jpeg");
   width:100%;
   height:100%;
   position:fixed;
   background-size:100% 100%;
 }
 
 
 .login{
     width:  350px;
     height: 450px;
     margin: 180px auto;
     margin-top: 40px;
     padding: 30px;
     border: 1px solid #eaeaea;
     background-color: #fff;
     /* border-radius: 15px;  圆角 */
     box-shadow: 0 0 25px #cac6c6 ;
     /*阴影  */
     box-sizing: border-box;
     
 }
 .login1{
     width:80%;
 }
 .el-input{
    width: 290px;
    /* display:block; */
    height: 40px;
    border-radius: 7px 0 0 7px;
    display: inline-block;
 }
 
 #title{
     color: #3e3a3a;
     margin-top: 10px;
     font-size: 45px;
     text-align: center;
 }
 .l-content{
    text-align: center;
 }

 #title1{
     text-align: center;
 }

 #title2{
     color: #000;
     text-align: center;
     margin-bottom: 15px;
     margin-top: 1px;
     font-size: 30px;
 }
 
 #login-button{
     /* margin-left: 20px; */
     margin-top: 40px;
     width: 290px;
     
 }
 
 


 </style>

